<template>
	<view class="container">
		<!-- 顶部状态栏 -->
		<view class="status-bar">
			<view class="status-item">
				<image class="status-icon" src="/static/images/games/farm/coin.svg" mode="aspectFit"></image>
				<text class="status-value">{{farmData.coins}}</text>
			</view>
			<view class="status-item">
				<image class="status-icon" src="/static/images/games/farm/diamond.svg" mode="aspectFit"></image>
				<text class="status-value">{{farmData.diamonds}}</text>
			</view>
			<view class="status-item">
				<image class="status-icon" src="/static/images/games/farm/level.svg" mode="aspectFit"></image>
				<text class="status-value">Lv.{{farmData.level}}</text>
			</view>
			<view class="status-item">
				<image class="status-icon" src="/static/images/games/farm/exp.svg" mode="aspectFit"></image>
				<text class="status-value">{{farmData.exp}}/{{farmData.nextLevelExp}}</text>
			</view>
		</view>
		
		<!-- 农场信息 -->
		<view class="farm-info">
			<image class="farm-image" :src="farmData.image" mode="aspectFill"></image>
			<view class="farm-detail">
				<text class="farm-name">{{farmData.name}}</text>
				<text class="farm-desc">{{farmData.description}}</text>
				<view class="farm-level-info">
					<text class="level-text">当前等级: {{farmData.level}}</text>
					<text class="exp-text">经验值: {{farmData.exp}}/{{farmData.nextLevelExp}}</text>
				</view>
			</view>
		</view>
		
		<!-- 种植区域 -->
		<view class="planting-area">
			<view class="section-header">
				<text class="section-title">种植区域</text>
				<text class="plot-count">已开垦: {{farmData.plots.length}}/9</text>
			</view>
			<view class="plot-grid">
				<view class="plot-item" v-for="(plot, index) in farmData.plots" :key="index"
					@click="handlePlotClick(plot)">
					<image v-if="plot.plant" class="plot-icon" :src="'/static/images/games/farm/' + plot.plant.id + '.svg'" mode="aspectFit"></image>
					<image v-else class="plot-icon" src="/static/images/games/farm/empty-plot.svg" mode="aspectFit"></image>
					<view class="plot-info" v-if="plot.plant">
						<text class="plant-name">{{plot.plant.name}}</text>
						<text class="plant-quality">{{plot.plant.quality}}</text>
						<text class="growth-stage">{{plot.plant.growthStage === 'mature' ? '可收获' : '生长中'}}</text>
						<text class="time-left">{{formatTime(plot.plant.timeLeft)}}</text>
						<button v-if="plot.plant.growthStage === 'seedling'" class="accelerate-btn" @click.stop="accelerateGrowth(plot)">
							加速
						</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 种子商店 -->
		<view class="seed-shop">
			<view class="section-header">
				<text class="section-title">种子商店</text>
				<text class="shop-tip">点击查看详情</text>
			</view>
			<scroll-view scroll-x class="seed-scroll">
				<view class="seed-list">
					<view class="seed-item" v-for="(seed, index) in availableSeeds" :key="index"
						@click="showSeedDetail(seed)">
						<image class="seed-icon" :src="'/static/images/games/farm/' + seed.icon" mode="aspectFit"></image>
						<text class="seed-name">{{seed.name}}</text>
						<text class="seed-price">{{seed.basePrice}}金币起</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 加工坊 -->
		<view class="processing-workshop">
			<view class="section-header">
				<text class="section-title">加工坊</text>
				<text class="workshop-tip">点击查看详情</text>
			</view>
			<view class="workshop-grid">
				<view class="workshop-item" v-for="(recipe, index) in availableRecipes" :key="index"
					@click="showRecipeDetail(recipe)">
					<image class="recipe-icon" :src="'/static/images/games/farm/' + recipe.icon" mode="aspectFit"></image>
					<text class="recipe-name">{{recipe.name}}</text>
					<text class="recipe-desc">{{recipe.description}}</text>
					<view class="recipe-ingredients">
						<text v-for="(ingredient, idx) in recipe.ingredients" :key="idx"
							class="ingredient-tag">{{plantDatabase[ingredient].name}}</text>
					</view>
					<view class="recipe-quality">
						<text v-for="(quality, idx) in Object.keys(recipe.qualities)" :key="idx"
							class="quality-tag">{{quality}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 每日任务 -->
		<view class="daily-tasks">
			<view class="section-header">
				<text class="section-title">每日任务</text>
				<text class="task-progress">{{completedTasks}}/{{totalTasks}}</text>
			</view>
			<view class="task-list">
				<view class="task-item" v-for="(task, index) in dailyTasks" :key="index">
					<view class="task-info">
						<text class="task-name">{{task.name}}</text>
						<view class="task-progress-bar">
							<view class="progress-inner" :style="{width: (task.progress/task.target)*100 + '%'}"></view>
						</view>
						<text class="task-progress-text">{{task.progress}}/{{task.target}}</text>
					</view>
					<view class="task-reward">
						<image class="reward-icon" src="/static/images/games/farm/coin.svg" mode="aspectFit"></image>
						<text class="reward-value">+{{task.reward}}</text>
					</view>
					<button class="task-btn" :class="{ 'completed': task.completed }"
						@click="completeTask(task)">
						{{task.completed ? '已完成' : '完成'}}
					</button>
				</view>
			</view>
		</view>
		
		<!-- 成就系统 -->
		<view class="achievements">
			<view class="section-header">
				<text class="section-title">成就系统</text>
				<text class="achievement-count">{{achievements.filter(a => a.unlocked).length}}/{{achievements.length}}</text>
			</view>
			<view class="achievement-list">
				<view class="achievement-item" v-for="(achievement, index) in achievements" :key="index">
					<image class="achievement-icon" :src="'/static/images/games/farm/' + achievement.icon" mode="aspectFit"></image>
					<view class="achievement-info">
						<text class="achievement-name">{{achievement.name}}</text>
						<text class="achievement-desc">{{achievement.description}}</text>
						<view class="achievement-reward">
							<image class="reward-icon" src="/static/images/games/farm/coin.svg" mode="aspectFit"></image>
							<text class="reward-value">+{{achievement.reward}}</text>
						</view>
					</view>
					<view class="achievement-status" :class="{ 'unlocked': achievement.unlocked }">
						<text>{{achievement.unlocked ? '已解锁' : '未解锁'}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 好友互动 -->
		<view class="friend-interaction">
			<view class="section-header">
				<text class="section-title">好友互动</text>
				<text class="interaction-tip">与好友一起玩</text>
			</view>
			<view class="interaction-grid">
				<view class="interaction-item" v-for="(action, index) in friendActions" :key="index"
					@click="handleFriendAction(action)">
					<image class="action-icon" :src="'/static/images/games/farm/' + action.icon" mode="aspectFit"></image>
					<text class="action-name">{{action.name}}</text>
					<text class="action-desc">{{action.description}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 食材等级配置
const PLANT_QUALITY = {
	NORMAL: '普通',
	GOOD: '优质',
	EXCELLENT: '极品'
}

// 食材数据库
const plantDatabase = ref({
	pepper: {
		name: '辣椒',
		icon: 'pepper.svg',
		basePrice: 30,
		qualities: {
			[PLANT_QUALITY.NORMAL]: {
				price: 30,
				growthTime: 1800, // 30分钟
				harvestValue: 60,
				successRate: 0.9
			},
			[PLANT_QUALITY.GOOD]: {
				price: 60,
				growthTime: 3600, // 1小时
				harvestValue: 120,
				successRate: 0.7
			},
			[PLANT_QUALITY.EXCELLENT]: {
				price: 120,
				growthTime: 7200, // 2小时
				harvestValue: 240,
				successRate: 0.5
			}
		}
	},
	mushroom: {
		name: '蘑菇',
		icon: 'mushroom.svg',
		basePrice: 20,
		qualities: {
			[PLANT_QUALITY.NORMAL]: {
				price: 20,
				growthTime: 3600,
				harvestValue: 40,
				successRate: 0.95
			},
			[PLANT_QUALITY.GOOD]: {
				price: 40,
				growthTime: 7200,
				harvestValue: 80,
				successRate: 0.75
			},
			[PLANT_QUALITY.EXCELLENT]: {
				price: 80,
				growthTime: 14400,
				harvestValue: 160,
				successRate: 0.55
			}
		}
	},
	beef: {
		name: '牛肉',
		icon: 'beef.svg',
		basePrice: 50,
		qualities: {
			[PLANT_QUALITY.NORMAL]: {
				price: 50,
				growthTime: 7200,
				harvestValue: 100,
				successRate: 0.8
			},
			[PLANT_QUALITY.GOOD]: {
				price: 100,
				growthTime: 14400,
				harvestValue: 200,
				successRate: 0.6
			},
			[PLANT_QUALITY.EXCELLENT]: {
				price: 200,
				growthTime: 28800,
				harvestValue: 400,
				successRate: 0.4
			}
		}
	}
})

// 加工配方数据库
const recipeDatabase = ref({
	spicySoup: {
		name: '麻辣底料',
		icon: 'spicy-soup.svg',
		description: '使用辣椒制作麻辣底料',
		ingredients: ['pepper'],
		qualities: {
			[PLANT_QUALITY.NORMAL]: {
				price: 100,
				processTime: 900,
				marketValue: 150
			},
			[PLANT_QUALITY.GOOD]: {
				price: 200,
				processTime: 1800,
				marketValue: 300
			},
			[PLANT_QUALITY.EXCELLENT]: {
				price: 400,
				processTime: 3600,
				marketValue: 600
			}
		}
	},
	mushroomSoup: {
		name: '菌菇底料',
		icon: 'mushroom-soup.svg',
		description: '使用蘑菇制作菌菇底料',
		ingredients: ['mushroom'],
		qualities: {
			[PLANT_QUALITY.NORMAL]: {
				price: 80,
				processTime: 900,
				marketValue: 120
			},
			[PLANT_QUALITY.GOOD]: {
				price: 160,
				processTime: 1800,
				marketValue: 240
			},
			[PLANT_QUALITY.EXCELLENT]: {
				price: 320,
				processTime: 3600,
				marketValue: 480
			}
		}
	}
})

// 农场数据
const farmData = ref({
	coins: 500,
	diamonds: 50,
	level: 1,
	exp: 0,
	nextLevelExp: 50,
	name: '我的火锅食材园',
	description: '种植优质食材，打造美味火锅',
	image: '/static/images/games/farm/farm.png',
	plots: Array(6).fill(null).map(() => ({
		plant: null
	})),
	inventory: {},
	processingQueue: [],
	marketDemand: {}
})

// 计算可用种子
const availableSeeds = computed(() => {
	return Object.entries(plantDatabase.value).map(([id, plant]) => ({
		id,
		name: plant.name,
		icon: plant.icon,
		basePrice: plant.basePrice,
		qualities: plant.qualities
	}))
})

// 计算可用配方
const availableRecipes = computed(() => {
	return Object.entries(recipeDatabase.value).map(([id, recipe]) => ({
		id,
		name: recipe.name,
		icon: recipe.icon,
		description: recipe.description,
		ingredients: recipe.ingredients,
		qualities: recipe.qualities
	}))
})

// 每日任务
const dailyTasks = ref([
	{
		id: 'plant_pepper',
		name: '种植辣椒',
		type: 'planting',
		progress: 0,
		target: 5,
		reward: 50,
		completed: false
	},
	{
		id: 'harvest_mushroom',
		name: '收获蘑菇',
		type: 'harvesting',
		progress: 0,
		target: 8,
		reward: 80,
		completed: false
	},
	{
		id: 'make_spicy_soup',
		name: '制作麻辣底料',
		type: 'processing',
		progress: 0,
		target: 3,
		reward: 100,
		completed: false
	}
])

// 成就列表
const achievements = ref([
	{
		id: 'junior_farmer',
		name: '初级农夫',
		description: '种植10个食材',
		icon: 'achievement1.svg',
		type: 'planting',
		requirement: 10,
		reward: 200,
		unlocked: false
	},
	{
		id: 'master_processor',
		name: '加工大师',
		description: '制作5种不同的底料',
		icon: 'achievement2.svg',
		type: 'processing',
		requirement: 5,
		reward: 400,
		unlocked: false
	},
	{
		id: 'social_expert',
		name: '社交达人',
		description: '与好友交换10次食材',
		icon: 'achievement3.svg',
		type: 'social',
		requirement: 10,
		reward: 300,
		unlocked: false
	}
])

// 好友互动
const friendActions = ref([
	{
		id: 'exchange',
		name: '交换食材',
		icon: 'exchange.svg',
		description: '与好友交换食材'
	},
	{
		id: 'gift',
		name: '赠送礼物',
		icon: 'gift.svg',
		description: '赠送食材给好友'
	},
	{
		id: 'invite',
		name: '邀请好友',
		icon: 'invite.svg',
		description: '邀请好友一起玩'
	}
])

// 计算任务完成进度
const completedTasks = computed(() => {
	return dailyTasks.value.filter(task => task.completed).length
})

const totalTasks = computed(() => {
	return dailyTasks.value.length
})

// 处理地块点击
const handlePlotClick = (plot) => {
	if (!plot.plant) {
		// 显示种子选择界面
		uni.showActionSheet({
			itemList: availableSeeds.value.map(seed => seed.name),
			success: (res) => {
				const selectedSeed = availableSeeds.value[res.tapIndex]
				showQualitySelection(selectedSeed, plot)
			}
		})
	} else if (plot.plant.growthStage === 'mature') {
		// 收获作物
		harvestPlant(plot)
	}
}

// 显示品质选择
const showQualitySelection = (seed, plot) => {
	uni.showActionSheet({
		itemList: Object.entries(seed.qualities).map(([quality, data]) => 
			`${quality} - ${data.price}金币`
		),
		success: (res) => {
			const qualities = Object.keys(seed.qualities)
			const selectedQuality = qualities[res.tapIndex]
			const qualityData = seed.qualities[selectedQuality]
			
			if (farmData.value.coins >= qualityData.price) {
				plantSeed(plot, seed, selectedQuality)
			} else {
				uni.showToast({
					title: '金币不足',
					icon: 'none'
				})
			}
		}
	})
}

// 种植种子
const plantSeed = (plot, seed, quality) => {
	const qualityData = seed.qualities[quality]
	farmData.value.coins -= qualityData.price
	
	plot.plant = {
		id: seed.id,
		name: seed.name,
		quality: quality,
		growthStage: 'seedling',
		timeLeft: qualityData.growthTime,
		plantTime: Date.now(),
		successRate: qualityData.successRate
	}
	
	// 开始生长计时
	startGrowthTimer(plot)
	
	// 更新任务进度
	updateTaskProgress('planting', 1)
	
	uni.showToast({
		title: '种植成功',
		icon: 'success'
	})
}

// 开始生长计时
const startGrowthTimer = (plot) => {
	const timer = setInterval(() => {
		if (plot.plant && plot.plant.timeLeft > 0) {
			plot.plant.timeLeft -= 1
		} else if (plot.plant) {
			// 检查是否成功生长
			const success = Math.random() < plot.plant.successRate
			if (success) {
				plot.plant.growthStage = 'mature'
			} else {
				plot.plant = null
				uni.showToast({
					title: '种植失败',
					icon: 'none'
				})
			}
			clearInterval(timer)
		}
	}, 1000)
}

// 收获作物
const harvestPlant = (plot) => {
	const plant = plot.plant
	const qualityData = plantDatabase.value[plant.id].qualities[plant.quality]
	
	farmData.value.coins += qualityData.harvestValue
	farmData.value.exp += 10
	
	// 添加到库存
	if (!farmData.value.inventory[plant.id]) {
		farmData.value.inventory[plant.id] = {}
	}
	if (!farmData.value.inventory[plant.id][plant.quality]) {
		farmData.value.inventory[plant.id][plant.quality] = 0
	}
	farmData.value.inventory[plant.id][plant.quality]++
	
	plot.plant = null
	
	// 更新任务进度
	updateTaskProgress('harvesting', 1)
	
	uni.showToast({
		title: `收获成功 +${qualityData.harvestValue}金币`,
		icon: 'success'
	})
}

// 加速生长
const accelerateGrowth = (plot) => {
	if (farmData.value.diamonds >= 5) {
		farmData.value.diamonds -= 5
		plot.plant.timeLeft = Math.max(0, plot.plant.timeLeft - 900) // 加速15分钟
		
		uni.showToast({
			title: '加速成功',
			icon: 'success'
		})
	} else {
		uni.showToast({
			title: '钻石不足',
			icon: 'none'
		})
	}
}

// 显示种子详情
const showSeedDetail = (seed) => {
	const qualities = Object.entries(seed.qualities)
	const content = qualities.map(([quality, data]) => 
		`${quality}:\n价格: ${data.price}金币\n生长时间: ${data.growthTime/3600}小时\n收获价值: ${data.harvestValue}金币\n成功率: ${data.successRate*100}%`
	).join('\n\n')
	
	uni.showModal({
		title: seed.name,
		content: content,
		showCancel: false
	})
}

// 显示配方详情
const showRecipeDetail = (recipe) => {
	const qualities = Object.entries(recipe.qualities)
	const content = qualities.map(([quality, data]) => 
		`${quality}:\n价格: ${data.price}金币\n加工时间: ${data.processTime/3600}小时\n市场价值: ${data.marketValue}金币`
	).join('\n\n')
	
	uni.showModal({
		title: recipe.name,
		content: content,
		success: (res) => {
			if (res.confirm) {
				showQualitySelection(recipe)
			}
		}
	})
}

// 制作配方
const makeRecipe = (recipe, quality) => {
	const qualityData = recipe.qualities[quality]
	
	// 检查食材是否足够
	const hasIngredients = recipe.ingredients.every(ingredient => {
		return farmData.value.inventory[ingredient] && 
			   farmData.value.inventory[ingredient][quality] > 0
	})
	
	if (hasIngredients) {
		// 消耗食材
		recipe.ingredients.forEach(ingredient => {
			farmData.value.inventory[ingredient][quality]--
		})
		
		// 添加到加工队列
		farmData.value.processingQueue.push({
			id: recipe.id,
			name: recipe.name,
			quality: quality,
			timeLeft: qualityData.processTime,
			startTime: Date.now()
		})
		
		// 开始加工计时
		startProcessingTimer(farmData.value.processingQueue.length - 1)
		
		// 更新任务进度
		updateTaskProgress('processing', 1)
		
		uni.showToast({
			title: '开始加工',
			icon: 'success'
		})
	} else {
		uni.showToast({
			title: '食材不足',
			icon: 'none'
		})
	}
}

// 开始加工计时
const startProcessingTimer = (index) => {
	const timer = setInterval(() => {
		const item = farmData.value.processingQueue[index]
		if (item && item.timeLeft > 0) {
			item.timeLeft -= 1
		} else if (item) {
			// 加工完成
			const recipe = recipeDatabase.value[item.id]
			const qualityData = recipe.qualities[item.quality]
			
			// 添加到库存
			if (!farmData.value.inventory[item.id]) {
				farmData.value.inventory[item.id] = {}
			}
			if (!farmData.value.inventory[item.id][item.quality]) {
				farmData.value.inventory[item.id][item.quality] = 0
			}
			farmData.value.inventory[item.id][item.quality]++
			
			// 从队列中移除
			farmData.value.processingQueue.splice(index, 1)
			
			clearInterval(timer)
			
			uni.showToast({
				title: '加工完成',
				icon: 'success'
			})
		}
	}, 1000)
}

// 销售物品
const sellItem = (itemId, quality) => {
	const item = farmData.value.inventory[itemId][quality]
	if (item > 0) {
		const recipe = recipeDatabase.value[itemId]
		const qualityData = recipe.qualities[quality]
		
		farmData.value.coins += qualityData.marketValue
		farmData.value.inventory[itemId][quality]--
		
		uni.showToast({
			title: `销售成功 +${qualityData.marketValue}金币`,
			icon: 'success'
		})
	}
}

// 更新任务进度
const updateTaskProgress = (type, amount) => {
	dailyTasks.value.forEach(task => {
		if (task.type === type) {
			task.progress = Math.min(task.progress + amount, task.target)
			if (task.progress >= task.target) {
				task.completed = true
			}
		}
	})
}

// 完成任务
const completeTask = (task) => {
	if (!task.completed) {
		task.completed = true
		farmData.value.coins += task.reward
		farmData.value.exp += 20
		
		// 检查成就
		checkAchievements()
		
		uni.showToast({
			title: `获得${task.reward}金币`,
			icon: 'success'
		})
	}
}

// 检查成就
const checkAchievements = () => {
	achievements.value.forEach(achievement => {
		if (!achievement.unlocked) {
			// 检查种植成就
			if (achievement.type === 'planting') {
				const totalPlants = Object.values(farmData.value.inventory)
					.reduce((sum, qualities) => 
						sum + Object.values(qualities).reduce((a, b) => a + b, 0), 0)
				if (totalPlants >= achievement.requirement) {
					unlockAchievement(achievement)
				}
			}
			// 检查加工成就
			else if (achievement.type === 'processing') {
				const totalProcessed = Object.values(farmData.value.inventory)
					.reduce((sum, qualities) => 
						sum + Object.values(qualities).reduce((a, b) => a + b, 0), 0)
				if (totalProcessed >= achievement.requirement) {
					unlockAchievement(achievement)
				}
			}
		}
	})
}

// 解锁成就
const unlockAchievement = (achievement) => {
	achievement.unlocked = true
	farmData.value.coins += achievement.reward
	
	uni.showToast({
		title: `解锁成就: ${achievement.name}`,
		icon: 'success'
	})
}

// 处理好友互动
const handleFriendAction = (action) => {
	switch(action.id) {
		case 'exchange':
			uni.showToast({
				title: '打开好友列表',
				icon: 'none'
			})
			break
		case 'gift':
			uni.showToast({
				title: '选择要赠送的食材',
				icon: 'none'
			})
			break
		case 'invite':
			uni.showToast({
				title: '生成邀请码',
				icon: 'none'
			})
			break
	}
}

// 保存游戏数据
const saveGameData = () => {
	const gameData = {
		farmData: farmData.value,
		dailyTasks: dailyTasks.value,
		achievements: achievements.value
	}
	uni.setStorageSync('farm_game_data', JSON.stringify(gameData))
}

// 加载游戏数据
const loadGameData = () => {
	const savedData = uni.getStorageSync('farm_game_data')
	if (savedData) {
		const gameData = JSON.parse(savedData)
		farmData.value = gameData.farmData
		dailyTasks.value = gameData.dailyTasks
		achievements.value = gameData.achievements
	}
}

// 页面加载时加载游戏数据
onMounted(() => {
	loadGameData()
})

// 页面卸载时保存游戏数据
onUnmounted(() => {
	saveGameData()
})

// 格式化时间
const formatTime = (seconds) => {
	if (!seconds) return '已完成'
	const hours = Math.floor(seconds / 3600)
	const minutes = Math.floor((seconds % 3600) / 60)
	const remainingSeconds = seconds % 60
	return `${hours}时${minutes}分${remainingSeconds}秒`
}
</script>

<style>
/* 基础动画关键帧 */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10rpx); }
}

@keyframes shine {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* 状态栏图标动画 */
.status-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
    transition: all 0.3s ease;
}

.status-icon:active {
    transform: scale(1.2);
}

/* 种植区域图标动画 */
.plot-icon {
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
}

.plot-item:active .plot-icon {
    transform: scale(0.95);
}

/* 种子商店图标动画 */
.seed-icon {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 10rpx;
    transition: all 0.3s ease;
}

.seed-item:active .seed-icon {
    animation: pulse 0.3s ease;
}

/* 加工坊图标动画 */
.recipe-icon {
    width: 100%;
    height: 160rpx;
    margin-bottom: 10rpx;
    transition: all 0.3s ease;
}

.workshop-item:active .recipe-icon {
    animation: rotate 0.3s ease;
}

/* 任务奖励图标动画 */
.reward-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 6rpx;
    animation: shine 2s infinite;
}

/* 成就图标动画 */
.achievement-icon {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
    transition: all 0.3s ease;
}

.achievement-item:active .achievement-icon {
    animation: bounce 0.3s ease;
}

/* 社交互动图标动画 */
.action-icon {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 10rpx;
    transition: all 0.3s ease;
}

.interaction-item:active .action-icon {
    animation: pulse 0.3s ease;
}

/* 可收获状态动画 */
.plot-item[data-stage="mature"] .plot-icon {
    animation: pulse 2s infinite;
}

/* 任务完成状态动画 */
.task-btn.completed {
    animation: shine 2s infinite;
}

/* 成就解锁状态动画 */
.achievement-status.unlocked {
    animation: pulse 2s infinite;
}

/* 添加悬停效果 */
.plot-item:hover,
.seed-item:hover,
.workshop-item:hover,
.interaction-item:hover {
    transform: translateY(-5rpx);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

/* 添加点击波纹效果 */
.plot-item::after,
.seed-item::after,
.workshop-item::after,
.interaction-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.plot-item:active::after,
.seed-item:active::after,
.workshop-item:active::after,
.interaction-item:active::after {
    opacity: 1;
}

/* 优化图标显示 */
.plot-icon,
.seed-icon,
.recipe-icon,
.achievement-icon,
.action-icon {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 添加加载动画 */
@keyframes loading {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-icon {
    animation: loading 1s linear infinite;
}

.container {
	padding: 20rpx;
	background-color: #F5F5F5;
	min-height: 100vh;
}

.status-bar {
	display: flex;
	justify-content: space-around;
	padding: 20rpx;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
}

.status-item {
	display: flex;
	align-items: center;
}

.status-value {
	font-size: 28rpx;
	color: #333;
}

.farm-info {
	display: flex;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.farm-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
}

.farm-detail {
	flex: 1;
}

.farm-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.farm-desc {
	font-size: 24rpx;
	color: #666;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.plot-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 20rpx;
}

.plot-item {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	background-color: #F8F8F8;
	border-radius: 8rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10rpx;
}

.plot-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.6));
	padding: 8rpx;
}

.plant-name {
	font-size: 20rpx;
	color: #FFFFFF;
	display: block;
}

.plant-quality {
	font-size: 20rpx;
	color: #FFD700;
	background-color: rgba(0, 0, 0, 0.6);
	padding: 2rpx 8rpx;
	border-radius: 4rpx;
}

.growth-stage {
	font-size: 16rpx;
	color: #FFFFFF;
	display: block;
}

.time-left {
	font-size: 16rpx;
	color: #FFFFFF;
	display: block;
}

.seed-scroll {
	white-space: nowrap;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 20rpx;
}

.seed-list {
	display: inline-flex;
	padding: 0 10rpx;
}

.seed-item {
	width: 160rpx;
	margin-right: 20rpx;
	text-align: center;
}

.seed-name {
	font-size: 24rpx;
	color: #333;
	margin-bottom: 6rpx;
	display: block;
}

.seed-price {
	font-size: 20rpx;
	color: #D02B29;
}

.workshop-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 20rpx;
}

.workshop-item {
	background-color: #F8F8F8;
	border-radius: 8rpx;
	padding: 20rpx;
}

.recipe-desc {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 10rpx;
	display: block;
}

.recipe-ingredients {
	display: flex;
	flex-wrap: wrap;
	gap: 10rpx;
}

.ingredient-tag {
	font-size: 20rpx;
	color: #666;
	background-color: #EEEEEE;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.task-progress {
	font-size: 24rpx;
	color: #666;
}

.task-list {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 20rpx;
}

.task-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #EEEEEE;
}

.task-item:last-child {
	border-bottom: none;
}

.task-info {
	display: flex;
	align-items: center;
	flex: 1;
}

.task-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 6rpx;
	display: block;
}

.task-btn {
	width: 120rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	background-color: #D02B29;
	color: #FFFFFF;
	border-radius: 30rpx;
	font-size: 24rpx;
}

.task-btn.completed {
	background-color: #CCCCCC;
}

.achievement-list {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 20rpx;
}

.achievement-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #EEEEEE;
}

.achievement-item:last-child {
	border-bottom: none;
}

.achievement-info {
	flex: 1;
}

.achievement-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 6rpx;
	display: block;
}

.achievement-desc {
	font-size: 24rpx;
	color: #666;
}

.achievement-status {
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	background-color: #F5F5F5;
	color: #999;
}

.achievement-status.unlocked {
	background-color: #E8F5E9;
	color: #4CAF50;
}

.interaction-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 20rpx;
}

.interaction-item {
	text-align: center;
	padding: 20rpx;
	background-color: #F8F8F8;
	border-radius: 8rpx;
}

.action-name {
	font-size: 24rpx;
	color: #333;
}

.farm-level-info {
	margin-top: 10rpx;
}

.level-text, .exp-text {
	font-size: 24rpx;
	color: #666;
	margin-right: 20rpx;
}

.accelerate-btn {
	font-size: 20rpx;
	color: #FFFFFF;
	background-color: #FF9800;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	margin-top: 4rpx;
}

.quality-tag {
	font-size: 20rpx;
	color: #4CAF50;
	background-color: #E8F5E9;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	margin-right: 8rpx;
}

.task-progress-bar {
	width: 200rpx;
	height: 8rpx;
	background-color: #EEEEEE;
	border-radius: 4rpx;
	margin: 4rpx 0;
	overflow: hidden;
}

.progress-inner {
	height: 100%;
	background-color: #4CAF50;
	transition: width 0.3s ease;
}

.task-progress-text {
	font-size: 20rpx;
	color: #666;
}

.achievement-count {
	font-size: 24rpx;
	color: #666;
}

.achievement-reward {
	display: flex;
	align-items: center;
	margin-top: 4rpx;
}

.action-desc {
	font-size: 20rpx;
	color: #666;
	margin-top: 4rpx;
}

.plot-count, .shop-tip, .workshop-tip, .interaction-tip {
	font-size: 24rpx;
	color: #666;
}
</style> 